import React from 'react'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'

var nowdate = new Date()
let endstr = `${nowdate.getFullYear()}-${nowdate.getMonth() +
  1}-${nowdate.getDate() + 1}`
let end = +echarts.number.parseDate(endstr) //`${+year + 1}-01-01`
let date = +(end - 365 * 24 * 60 * 60 * 1000)
let datestr = echarts.format.formatTime('yyyy-MM-dd', date)
// let max = 0;

const RadaComponent = ({ datas }) => {
  const getVirtulData = () => {
    // year = year || '2019'
    const trans = {
      DASHBOARD: '获取首页信息',
      USER: '获取用户个人信息',
      ROUTES: '获取页面菜单列表',
      DEVICES: '获取用户的所有设备',
      DEVICEINFO: '获取设备详情',
      DEVICE_RENAME: '修改设备名',
      DEVICE_REPROJECT: '修改改变所属项目',
      DEVICE_REFIRMVERSION: '修改设备固件版本',
      DEVICE_RESERVINGTIME: '修改设备上次维护时间',
      DEVICE_RECHARGE: '修改设备负责人',
      DEVICE_NOTE: '修改设备备注',
      DEVICE_SEARCH: '按条件搜索设备',
      DEVICE_HISTROY: '查询设备历史操作',
      PROJECTS: '查询用户所有项目',
      PROJECTRENAME: '修改项目名',
      PROJECTDELETE: '删除项目',
      PROJECTADD: '新建项目',
    }
    let data = []
    Object.keys(datas).map(key => {
      let value = parseInt(datas[key])
      const transtr = trans[key]
      if (transtr) {
        data.push({ value: value, name: transtr })
      }
    })
    return data
  }

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      x: 'center',
      y: 'top',
      // orient: "vertical"
    },
    // toolbox: {
    //   show: true,
    //   feature: {
    //     mark: { show: true },
    //     dataView: { show: true, readOnly: false },
    //     magicType: {
    //       show: true,
    //       type: ['pie', 'funnel']
    //     },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    calculable: true,
    series: [
      {
        name: 'Api调用次数',
        type: 'pie',
        radius: [10, 90],
        center: ['50%', '50%'],
        roseType: 'radius',
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
          },
        },
        lableLine: {
          length: '10px',
          length2: '10px',
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
          },
        },
        data: getVirtulData(),
      },
    ],
  }

  return (
    <ReactEcharts
      option={option}
      // style={{ height: "240px" }}
      className="react_for_echarts"
    />
  )
}

export default RadaComponent
